<template>
  <div>
    <!-- 新增 -->
    <div class="mt20"></div>
    <div class="bor7 pa15 ">
      <div class="search clearfix">
        <div class="search-box fr">
          <el-button type="primary" data-toggle="modal" data-target="#again" class="primary"
            >新增</el-button
          >
        </div>
      </div>

      <div class="table-responsive mt20">
        <table class="table">
          <tbody>
            <tr>
              <th>收款方式</th>
              <th>开户行</th>
              <th>收款账号</th>
              <th>持卡人</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item,index) in this.defaultList" :key="item.id">
              <td>{{ item.type }}</td>
              <td>{{ item.bank }}</td>
              <td>{{ item.account }}</td>
              <td>{{ item.name }}</td>
              <td>
                <el-button type="success"   data-toggle="modal" data-target="#again1" @click="readBank(''+ index +'')" >修改</el-button>
                <el-popover placement="top" width="200" trigger="click"
                            :ref="'popovert-' + item.id"
                >
                  <p>删除当前信息</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      type="primary"  class="primary primary1"
                      size="mini"
                      @click="deleteData('' + item.id + '')"
                      >确定</el-button
                    >
                    <el-button
                      size="mini"
                      class="quxiao"
                      type="text"
                      @click="pCancelt(item.id)"
                    >取消</el-button
                    >
                  </div>
                  <el-button slot="reference" type="danger">删除</el-button>
                </el-popover>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 分页 -->
        <div class="block ta">
          <el-pagination
            layout="  prev, pager, next "
            :page-size="page_size"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :pager-count="5"
            :total="defaultinfo.total"
            v-if="defaultinfo.pages > 1"
          >
          </el-pagination>
    <el-empty description="暂无数据"  v-if="defaultinfo.pages == 0"></el-empty>
        </div>
      </div>

      <!-- 添加银行卡弹出框 -->
      <div
        class="modal modal_div fade txsq"
        tabindex="-1"
        role="dialog "
        aria-labelledby="myLargeModalLabel"
        id="again"
        style="display: none"
      >
        <div class="modal-dialog modal-lg" role="document ">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-hidden="true"
              >
                <i class="el-icon-close"></i>
              </button>
              <h4 class="modal-title modal_div_tit ta" id="myLargeModalLabel">
                添加银行卡
              </h4>
            </div>
            <div class="modal-body clearfix">
              <div class="create-box">
                <p class="ta font12">请绑定持卡人本人的银行卡</p>
                <el-form
                  :model="ruleForm"
                  status-icon
                  :rules="ruleFormRules"
                  ref="ruleForm"
                  label-width="6.5rem"
                  class="demo-ruleForm mt10"
                >
                  <el-form-item label="持卡人" prop="name" class="font12">
                    <el-input
                      type="text"
                      v-model="ruleForm.name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="卡号" prop="account" class="font12">
                    <el-input
                      type="text"
                      v-model.number="ruleForm.account"
                      oninput="value=value.replace(/\D/g,'')"
                      autocomplete="off"
                      placeholder="持卡人本人银行卡号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="开户行" prop="bank" class="font12">
                    <el-input
                      type="text"
                      v-model="ruleForm.bank"
                      autocomplete="off"
                      placeholder="开户行"
                    ></el-input>
                  </el-form-item>

                  <el-form-item class="ta butt">
                    <el-button
                      type="submit"
                      class="primary"
                      @click="handleSubmit">
                      提交
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 修改弹窗  -->
         <div
        class="modal modal_div fade txsq"
        tabindex="-1"
        role="dialog "
        aria-labelledby="myLargeModalLabel"
        id="again1"
        style="display: none"
      >
        <div class="modal-dialog modal-lg" role="document ">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-hidden="true"
              >
                <i class="el-icon-close"></i>
              </button>
              <h4 class="modal-title modal_div_tit ta" id="myLargeModalLabel">
                修改信息
              </h4>
            </div>
            <div class="modal-body clearfix">
              <div class="create-box">
                <p class="ta font12">请绑定持卡人本人的银行卡</p>
                <el-form
                  :model="ruleEditForm"
                  status-icon
                  :rules="ruleEditFormRules"
                  ref="ruleEditForm"
                  label-width="6.5rem"
                  class="demo-ruleForm mt10"
                >
                  <el-form-item label="持卡人" prop="name" class="font12">
                    <el-input
                      type="text"
                      v-model="ruleEditForm.name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="卡号" prop="account" class="font12">
                    <el-input
                      type="text"
                      v-model="ruleEditForm.account"
                      autocomplete="off"
                      oninput="value=value.replace(/\D/g,'')"
                      placeholder="持卡人本人银行卡号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="开户行" prop="bank" class="font12">
                    <el-input
                      type="text"
                      v-model="ruleEditForm.bank"
                      autocomplete="off"
                      placeholder="开户行"
                    ></el-input>
                  </el-form-item>

                  <el-form-item class="ta butt">
                    <el-button
                      type="submit"
                      class="primary"
                      @click="handleEditSubmit(''+ruleEditForm.id+'')">
                      提交
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultList: [],
      defaultinfo: [],
      sort: "id",
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      ruleForm: [],
      ruleFormRules: {
        name: [{ required: true, message: "持卡人必填", trigger: "blur" }],
        account: [{ required: true, message: "卡号必填", trigger: "blur" },{ type: 'number', message: '卡号必须为数字'}],
        bank: [{ required: true, message: "开户行必填", trigger: "blur" }],
      },
      ruleEditForm: [],
      ruleEditFormRules: {
        id: [{ required: true, message: "ID必填", trigger: "blur" }],
        name: [{ required: true, message: "持卡人必填", trigger: "blur" }],
        account: [{ required: true, message: "卡号必填", trigger: "blur" }],
        bank: [{ required: true, message: "开户行必填", trigger: "blur" }],
      },
    };
  },
  methods: {
    pCancelt(id) {
      this.$refs[`popovert-`+id][0].doClose()
    },
    //提交
    handleSubmit() {
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            //console.log(this.ruleForm);
            //定义一个json示例
            var jsons = {
              type: "银行卡",
              name: this.ruleForm.name,
              account: this.ruleForm.account,
              bank: this.ruleForm.bank,
            };

            var that = this;

            this.$axios
              .post(this.$api + "/api/moneyaccount/add", jsons)
              .then((res) => {
                //console.log(res.data);
                if (res.data.code == 1) {
                  that.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  //location.href = "/#/my_story";
                  that.getBankList();
                  $('.txsq').hide();
                  $('.modal-backdrop').remove('.in');
                  //location.reload();
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                //console.log(Error);
              });
          }
        });
      })
    },
    handleEditSubmit(id) {
      this.$refs.ruleEditForm.validate(async (valid) => {
        if (valid) {
          //console.log(this.ruleEditForm);
          //定义一个json示例
          var jsons = {
            type: "银行卡",
            name: this.ruleEditForm.name,
            account: this.ruleEditForm.account,
            bank: this.ruleEditForm.bank,
            id: id,
          };

          var that = this;

          this.$axios
            .post(this.$api + "/api/moneyaccount/edit", jsons)
            .then((res) => {
              //console.log(res.data);
              if (res.data.code == 1) {
                that.$message({
                  message: res.data.msg,
                  type: "success",
                });
                //location.href = "/#/my_story";
                that.getBankList();
                $('.txsq').hide();
                $('.modal-backdrop').remove('.in');
                //location.reload();
              } else {
                that.$message.error(res.data.msg);
              }
            })
            .catch((Error) => {
              //console.log(Error);
            });
        }
      });
    },
    deleteData(id) {
      //console.log(1231);
      //console.log(id);
      var that = this;
      this.$axios
        .get(this.$api + "//api//moneyaccount/delete?id=" + id)
        .then(function (response) {
          //that.defaultList = response.data.data.data;
          if (response.data.code == 1) {
            that.$message({
              message: response.data.msg,
              type: "success",
            });
            that.getBankList();
          } else {
            that.$message.error(response.data.msg);
          }
          //console.log(response.data);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    readBank(id){
      //console.log('序号', id);
      //console.log('内容', this.defaultList[id]);
      this.ruleEditForm = this.defaultList[id];
    },
    getBankList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/moneyaccount/index?page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size +
            "&sort=" +
            that.sort +
            "&order=desc&search=;type:;"
        )
        .then(function (response) {
          that.defaultList = response.data.data.data;
          that.defaultinfo = response.data.data.page;
          //console.log("defaultList", that.defaultList);
          //console.log("defaultinfo", that.defaultinfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getBankList();
    },
  },
  mounted() {
    this.getBankList();
  },
};
</script>

<style scoped>
.quxiao {
      background: #f6f5f5;  font-size: 0.875rem;
          padding:0.3125rem 0.625rem;
}.quxiao:hover {
  background: #909399 !important;
  color: #fff !important;
}
.primary.primary1 {
      padding:0.3125rem 0.625rem;
}
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.finance-box-fix {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 1.875rem 1.25rem;
  border-radius: 0.4375rem;
}
.finance-box-fix > div {
  -webkit-flex: 1;
  flex: 1;
}
.finance-box-fix > div {
  border-right: 1px solid #f0f2f5;
}
.finance-box-fix > div:nth-last-child(1) {
  border-right: none;
}
.finance-box-fix > div:nth-of-type(1) {
  text-align: left;
}
.finance-box-fix > div .font36 {
  color: #4285f4;
}
.finance-box-fix > div .font14 {
  color: #484949;
}
.finance-box-fix > div .font12 {
  color: #9fa0a3;
}
.finance-box-fix > div .el-button--primary {
  margin-left: 5.625rem;
  padding: 7px 20px;
}
.finance-feg {
  padding: 1.25rem;
  line-height: 24px;
  color: #545556;
}
.finance-feg span {
  color: #de5044;
}
.table th {
  border-top: none;
  background: #f6f5f5;
  font-size: 0.875rem;
  color: #545556;
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
}
table tr td {
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
  border-top: none;
  border-bottom: 1px solid #f6f5f5;
}
table .el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
.el-button--danger {
  background: #de5044;
  border-color: #de5044;
}
.el-button--success {
  background: #19a15f;
}
.el-form-item {
  margin-bottom: 0.625rem;
}.primary {
  padding: 0.8rem 2rem;
}
</style>

<style >
 .txsq .el-form-item__error {
  position: relative;
}
.butt .el-form-item__content{
  margin-left: 0 !important;
}
</style>
